<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../../../src/base/_core.js"></script>
    <script type="text/javascript" src="../../../src/client/env.js"></script>
    <style type="text/css">
        html, body {
            border: 0 none;
        }
    </style>
</head>
<body>

<div id="div1" style="border: 5px solid #f00; width:200px; height: 300px; position:absolute; left:30px; top:200px;">
    <div id="div1_in"
         style="width:20px; margin-left: 20px; height: 30px; position:absolute; left:10px; top:20px; border: 2px solid #333;">
        margin-left: 20px;
    </div>

</div>
<div id="div2"
     style="border: 5px solid #f00; margin:40px 30px 30px 200px; width:200px; height: 300px; position:absolute; left:10px; top:200px;"></div>

<script type="text/javascript">
    //取得元素x坐标
    function getCoords(el) {
        var box = el.getBoundingClientRect(),
                doc = el.ownerDocument,
                body = doc.body, //ie quickMode && webkit(navigator.vendor)
                root = doc.documentElement,
                clientTop = root.clientTop || body.clientTop || 0,
                clientLeft = root.clientLeft || body.clientLeft || 0,
                /**
                 * clientLeft有可能有3种取值：
                 * 0:一般情况
                 * undefind：改为0，可以这样：undefind>>0 或者：undefind || 0
                 * 2:在quickMode
                 */
                        top = box.top + (window.pageYOffset || root.scrollTop || body.scrollTop ) - clientTop,
                left = box.left + (window.pageXOffset || root.scrollLeft || body.scrollLeft) - clientLeft;
        return { 'top':top, 'left':left };
    }
    var div1 = document.getElementById('div1');
    var div1_in = document.getElementById('div1_in');
    var div2 = document.getElementById('div2');

    /**
     * 1.quickMode && webkit :root =document.body
     * 2.ie67下：clientTop/clientLeft=2 其它情况为0
     * 3.ie和w3c现在都支持getBoundingClientRect 这个API，对于不支持的可以用offsetParent累加取得
     */

    (function (document, browser, window) {
        var ln = {
            getDoc:function (element) {
                return element.ownerDocument || document;
            },
            getXY:function (element) {
                var doc = ln.getDoc(element),
                        box = element.getBoundingClientRect(),
                        root = (browser.isStrict && !browser.webkit) ? document.documentElement : document.body,
                        clientTop = root.clientTop || 0,
                        clientLeft = root.clientLeft || 0;
                return {
                    'top':box.top + (window.pageYOffset || root.scrollTop ) - clientTop,
                    'left':box.left + (window.pageXOffset || root.scrollLeft ) - clientLeft
                };
            }
        };
        window.ln = ln;
    }(document, line.browser, window));

</script>


</body>
</html>